<template>
  <div>
    <Button @click="callCamera">打开摄像头</Button>
    <Button @click="takePhoto">拍照</Button>
    <Button @click="takePhotos">连续拍照</Button>
    <br>
    <video src="" autoplay>
    </video>
    <!-- <url-image url="www.baidu.com"></url-image> -->
    <canvas id="canvas" width="375" height="603"></canvas>
  </div>
</template>

<script>
import urlImage from '@/pages/urlImage.vue'
import {dataURLtoFile} from '@/utils/file'
import {uuid} from '@/utils/uuid.js'
export default {
    components:{
        urlImage
    },
    data(){
        return{
            imageIndex: 0,
            opt:{
                audio:true,
                video:{
                    width:375,
                    height:603
                }
            },
            mediaRecorder:{}
        }
    },
    methods:{   
        getPic(){
            
        },
        callCamera(){
            navigator.mediaDevices.getUserMedia(this.opt)
            .then(mediaStream=>{
                let video=document.querySelector('video')
                video.srcObject=mediaStream
                video.play()
          }).catch(err=>{
              console.log(err.name+":"+err.message)
          })
        },
        takePhoto(){
            let canvas=document.querySelector('canvas')
            let video=document.querySelector('video')
            let ctx=canvas.getContext('2d')
            ctx.drawImage(video,0,0,300,460)
            let img=canvas.toDataURL()

            // console.log('img----', img)
            let formData=new FormData()
            let file=dataURLtoFile(img,'cache.jpg')
            this.imageIndex++
            formData.append('image',file)
            this.$axios.post('/app/api/file/getImage',formData,{
                headers:{
                    'fbzUserId': cookie.get('fbzUserId'),
                    'fbzUserToken': cookie.get('fbzToken'),
                }
            }).then(res=>{
                console.log('success')
            })
            
        },
        takePhotos(){
            setInterval(()=>{
                this.takePhoto()
            },50)
        }
    },
    mounted(){
        this.callCamera()

    }
}
import cookie from 'js-cookie'
</script>

<style scoped>
</style>
